<script setup lang='ts' name="purchase-protocol-management">
import type { VxePagerEvents, VxeTableInstance } from 'vxe-table'

import { useGetAgreementMetaPage, useStopAgreementMetaInfo } from '@fl/api/purchase'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import { agreementStateOptions, agreementTypeOptions } from './constant'
import { filterLabel } from './heler'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { gridOptions } = useTable()
const router = useRouter()
const { form, reset, schema } = useForm()
const searchParams = computed(() => {
    return {
        agreementCode: form.value.agreementCode,
        agreementName: form.value.agreementName,
        agreementState: form.value.agreementState,
        agreementType: form.value.agreementType,
        page: gridOptions.pagerConfig.currentPage,
        partyB: form.value.partyB,
        size: gridOptions.pagerConfig.pageSize,
    }
})
const { data, isLoading } = useGetAgreementMetaPage(searchParams)
const { isPending, mutate } = useStopAgreementMetaInfo()
const tableRef = ref<VxeTableInstance<any>>()
const tableLoading = computed(() => isPending.value || isLoading.value)

function goShow(row: any) {
    router.push(`/purchase-pages/purchase-order-management/purchase-protocol-management/${row.id}`)
}

function goAdd(row: any) {
    router.push(`/purchase-pages/purchase-order-management/purchase-protocol-add/${row.id}`)
}

function stopInfo(row: any) {
    mutate(row.id, {
        onSuccess: () => {
            ElMessage.success('停用成功')
        },
    })
}

function showAdd(row: any) {
    return row.agreementState === 4 && row.agreementType === 2
}
function searchSubmit(value: any) {
    form.value = Object.assign(form.value, value)
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    gridOptions.pagerConfig.currentPage = currentPage
    gridOptions.pagerConfig.pageSize = pageSize
}
watchEffect(() => {
    if (data.value) {
        gridOptions.data = cloneDeep(data.value?.records) ?? []
        gridOptions.pagerConfig.total = data.value?.total ?? 0
    }
})
</script>

<template>
    <ElCard mb-20>
        <SearchForm v-bind="form"
                    :columns="schema"
                    submit-text="查询"
                    @submit="searchSubmit"
                    @reset="reset"
        />
    </ElCard>

    <ElCard>
        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="tableLoading"
                     @page-change="handlePageChange"
        >
            <template #agreementType="{ row }">
                {{ filterLabel(agreementTypeOptions, row.agreementType) }}
            </template>

            <template #agreementState="{ row }">
                {{ filterLabel(agreementStateOptions, row.agreementState) }}
            </template>

            <template #operate="{ row }">
                <div class="flex gap-20 w-full justify-center">
                    <span class="text-#da0004 cursor-pointer"
                          @click="goShow(row)"
                    >
                        查看
                    </span>

                    <span v-if="showAdd(row)"
                          class="cursor-pointer"
                          @click="goAdd(row)"
                    >
                        下单
                    </span>

                    <span v-if="showAdd(row.agreementState)"
                          class="cursor-pointer"
                          @click="stopInfo(row)"
                    >
                        停用
                    </span>
                </div>
            </template>
        </SearchTable>
    </ElCard>
</template>
